<template>
  <div class="kawaii-settings">
    <div class="kawaii-settings-header">
      <h3 class="kawaii-section-title">设置</h3>
    </div>

    <div class="kawaii-settings-container">
      <!-- 设置导航 -->
      <div class="kawaii-settings-nav">
        <div
          v-for="(item, index) in settingsMenu"
          :key="index"
          :class="[
            'kawaii-nav-item',
            activeSettingIndex === index ? 'active' : '',
          ]"
          @click="activeSettingIndex = index"
        >
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </div>
      </div>

      <!-- 设置内容 -->
      <div class="kawaii-settings-content">
        <!-- 隐私设置 -->
        <div v-if="activeSettingIndex === 0" class="kawaii-setting-section">
          <h4 class="kawaii-section-subtitle">隐私设置</h4>

          <div class="kawaii-setting-item">
            <div class="kawaii-setting-info">
              <div class="kawaii-setting-title">公开我的收藏</div>
              <div class="kawaii-setting-desc">
                其他用户可以查看我的收藏内容
              </div>
            </div>
            <div class="kawaii-setting-control">
              <el-switch v-model="privacySettings.showFavorites" />
            </div>
          </div>

          <div class="kawaii-setting-item">
            <div class="kawaii-setting-info">
              <div class="kawaii-setting-title">公开我的生日、个人标签</div>
              <div class="kawaii-setting-desc">
                在个人资料中显示我的生日和个人标签
              </div>
            </div>
            <div class="kawaii-setting-control">
              <el-switch v-model="privacySettings.showBirthday" />
            </div>
          </div>

          <div class="kawaii-setting-item">
            <div class="kawaii-setting-info">
              <div class="kawaii-setting-title">公开我的学校信息</div>
              <div class="kawaii-setting-desc">
                在个人资料中显示我的学校信息
              </div>
            </div>
            <div class="kawaii-setting-control">
              <el-switch v-model="privacySettings.showSchool" />
            </div>
          </div>

          <div class="kawaii-form-actions">
            <el-button
              type="primary"
              @click="savePrivacySettings"
              class="kawaii-save-btn"
            >
              保存设置
            </el-button>
          </div>
        </div>

        <!-- 排序设置 -->
        <div v-if="activeSettingIndex === 1" class="kawaii-setting-section">
          <h4 class="kawaii-section-subtitle">排序设置</h4>

          <div class="kawaii-setting-item">
            <div class="kawaii-setting-info">
              <div class="kawaii-setting-title">我的稿件</div>
              <div class="kawaii-setting-desc">
                设置我的稿件在个人空间的排序方式
              </div>
            </div>
            <div class="kawaii-setting-control">
              <el-select
                v-model="orderSettings.videoOrder"
                placeholder="请选择排序方式"
              >
                <el-option label="最新发布" value="newest" />
                <el-option label="最多播放" value="most_viewed" />
                <el-option label="最多收藏" value="most_favorited" />
              </el-select>
            </div>
          </div>

          <div class="kawaii-setting-item">
            <div class="kawaii-setting-info">
              <div class="kawaii-setting-title">我的收藏</div>
              <div class="kawaii-setting-desc">
                设置我的收藏在个人空间的排序方式
              </div>
            </div>
            <div class="kawaii-setting-control">
              <el-select
                v-model="orderSettings.favoriteOrder"
                placeholder="请选择排序方式"
              >
                <el-option label="最近收藏" value="recent" />
                <el-option label="最多播放" value="most_viewed" />
                <el-option label="最新发布" value="newest" />
              </el-select>
            </div>
          </div>

          <div class="kawaii-setting-item">
            <div class="kawaii-setting-info">
              <div class="kawaii-setting-title">我的动态</div>
              <div class="kawaii-setting-desc">
                设置我的动态在个人空间的排序方式
              </div>
            </div>
            <div class="kawaii-setting-control">
              <el-select
                v-model="orderSettings.dynamicOrder"
                placeholder="请选择排序方式"
              >
                <el-option label="最新发布" value="newest" />
                <el-option label="最多互动" value="most_interactive" />
              </el-select>
            </div>
          </div>

          <div class="kawaii-form-actions">
            <el-button
              type="primary"
              @click="saveOrderSettings"
              class="kawaii-save-btn"
            >
              保存设置
            </el-button>
          </div>
        </div>

        <!-- 主页模块 -->
        <div v-if="activeSettingIndex === 2" class="kawaii-setting-section">
          <h4 class="kawaii-section-subtitle">主页模块</h4>
          <p class="kawaii-section-desc">
            拖拽调整模块顺序，取消选择隐藏模块 ✨
          </p>

          <div class="kawaii-module-list">
            <div
              v-for="(module, index) in moduleSettings"
              :key="module.id"
              class="kawaii-module-item"
            >
              <div class="kawaii-drag-handle">
                <i class="el-icon-rank"></i>
              </div>
              <div class="kawaii-module-info">
                <el-checkbox v-model="module.visible">
                  {{ module.name }}
                </el-checkbox>
                <div class="kawaii-module-desc">{{ module.description }}</div>
              </div>
              <div class="kawaii-module-actions">
                <i
                  class="el-icon-arrow-up"
                  v-if="index > 0"
                  @click="moveModule(index, index - 1)"
                ></i>
                <i
                  class="el-icon-arrow-down"
                  v-if="index < moduleSettings.length - 1"
                  @click="moveModule(index, index + 1)"
                ></i>
              </div>
            </div>
          </div>

          <div class="kawaii-form-actions">
            <el-button
              type="primary"
              @click="saveModuleSettings"
              class="kawaii-save-btn"
            >
              保存设置
            </el-button>
          </div>
        </div>

        <!-- 黑名单管理 -->
        <div v-if="activeSettingIndex === 3" class="kawaii-setting-section">
          <h4 class="kawaii-section-subtitle">黑名单管理</h4>
          <p class="kawaii-section-desc">
            加入黑名单的用户将不能查看您的动态、关注您、给您发消息
          </p>

          <div class="kawaii-search-bar">
            <el-input
              v-model="blacklistKeyword"
              placeholder="搜索用户"
              prefix-icon="el-icon-search"
              clearable
            >
              <template #append>
                <el-button @click="searchBlacklist">搜索</el-button>
              </template>
            </el-input>
          </div>

          <div v-if="blacklist.length === 0" class="kawaii-empty-blacklist">
            <img
              src="@/assets/icons/empty-box.svg"
              alt="暂无黑名单"
              class="kawaii-empty-icon"
            />
            <p>暂无黑名单用户</p>
          </div>

          <div v-else class="kawaii-blacklist">
            <div
              v-for="user in blacklist"
              :key="user.id"
              class="kawaii-blacklist-item"
            >
              <div class="kawaii-user-info">
                <img
                  :src="user.avatar"
                  alt="用户头像"
                  class="kawaii-user-avatar"
                />
                <div class="kawaii-user-details">
                  <div class="kawaii-user-name">{{ user.name }}</div>
                  <div class="kawaii-block-time">
                    加入时间: {{ user.blockTime }}
                  </div>
                </div>
              </div>
              <div class="kawaii-blacklist-actions">
                <el-button
                  type="danger"
                  size="small"
                  @click="removeFromBlacklist(user)"
                >
                  移除
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()

// 设置菜单
const settingsMenu = [
  { title: '隐私设置', icon: 'el-icon-lock' },
  { title: '排序设置', icon: 'el-icon-sort' },
  { title: '主页模块', icon: 'el-icon-s-grid' },
  { title: '黑名单管理', icon: 'el-icon-user-solid' },
]

// 当前活跃设置索引
const activeSettingIndex = ref(0)

// 隐私设置
const privacySettings = ref({
  showFavorites: true,
  showBirthday: true,
  showAnime: true,
  showSchool: false,
  showLiveReplay: true,
  showClassVideo: true,
  showChargeVideo: true,
})

// 排序设置
const orderSettings = ref({
  videoOrder: 'newest',
  favoriteOrder: 'recent',
  dynamicOrder: 'newest',
})

// 主页模块设置
const moduleSettings = ref([
  {
    id: 1,
    name: '视频投稿',
    description: '显示用户上传的视频',
    visible: true,
  },
  {
    id: 2,
    name: '合集',
    description: '显示用户创建的合集',
    visible: true,
  },
  {
    id: 3,
    name: '收藏',
    description: '显示用户收藏的内容',
    visible: true,
  },
])

// 黑名单相关
const blacklist = ref([])
const blacklistKeyword = ref('')

// 模拟黑名单数据
const generateMockBlacklist = () => {
  const mockUsers = []

  for (let i = 0; i < 5; i++) {
    const date = new Date()
    date.setDate(date.getDate() - Math.floor(Math.random() * 30))

    mockUsers.push({
      id: i + 1,
      name: `用户${i + 1}`,
      avatar: '/src/assets/defaultuser.png',
      blockTime: formatDate(date),
    })
  }

  return mockUsers
}

// 格式化日期
const formatDate = (date) => {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 保存隐私设置
const savePrivacySettings = async () => {
  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 500))

    alert('隐私设置已保存')
  } catch (error) {
    console.error('保存隐私设置失败:', error)
  }
}

// 保存排序设置
const saveOrderSettings = async () => {
  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 500))

    alert('排序设置已保存')
  } catch (error) {
    console.error('保存排序设置失败:', error)
  }
}

// 保存模块设置
const saveModuleSettings = async () => {
  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 500))

    alert('模块设置已保存')
  } catch (error) {
    console.error('保存模块设置失败:', error)
  }
}

// 移动模块
const moveModule = (fromIndex, toIndex) => {
  const item = moduleSettings.value.splice(fromIndex, 1)[0]
  moduleSettings.value.splice(toIndex, 0, item)
}

// 搜索黑名单
const searchBlacklist = () => {
  // 模拟搜索逻辑
  if (blacklistKeyword.value) {
    blacklist.value = blacklist.value.filter((user) =>
      user.name.toLowerCase().includes(blacklistKeyword.value.toLowerCase()),
    )
  } else {
    // 重置为全部黑名单
    blacklist.value = generateMockBlacklist()
  }
}

// 从黑名单移除
const removeFromBlacklist = async (user) => {
  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 500))

    // 从列表中移除
    blacklist.value = blacklist.value.filter((u) => u.id !== user.id)

    alert(`已将 ${user.name} 从黑名单中移除`)
  } catch (error) {
    console.error('移除黑名单失败:', error)
  }
}

// 初始化
onMounted(() => {
  // 获取黑名单列表
  blacklist.value = generateMockBlacklist()
})
</script>

<style scoped lang="scss">
.kawaii-settings {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kawaii-settings-header {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 12px 20px;
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
  border: 2px solid rgba(255, 182, 193, 0.3);
}

.kawaii-section-title {
  font-size: 20px;
  font-weight: bold;
  color: #7c5479;
  margin: 0;
  position: relative;
  display: inline-block;

  &::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #fe4ea4, #ff9fcf);
    border-radius: 3px;
  }
}

.kawaii-settings-container {
  display: flex;
  gap: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
  border: 2px solid rgba(255, 182, 193, 0.3);
  backdrop-filter: blur(5px);

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.kawaii-settings-nav {
  width: 180px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(255, 182, 193, 0.15);

  @media (max-width: 768px) {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}

.kawaii-nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #7c5479;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.3s;

  &:hover {
    background-color: rgba(255, 200, 227, 0.2);
  }

  &.active {
    background-color: rgba(255, 200, 227, 0.3);
    border-left-color: #fe4ea4;
    color: #fe4ea4;
    font-weight: bold;
  }

  i {
    margin-right: 10px;
    font-size: 18px;
  }

  @media (max-width: 768px) {
    border-left: none;
    border-bottom: 3px solid transparent;

    &.active {
      border-left-color: transparent;
      border-bottom-color: #fe4ea4;
    }
  }
}

.kawaii-settings-content {
  flex: 1;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(255, 182, 193, 0.15);
}

.kawaii-section-subtitle {
  font-size: 18px;
  font-weight: bold;
  color: #7c5479;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(255, 182, 193, 0.5);
}

.kawaii-section-desc {
  font-size: 14px;
  color: #99809d;
  margin-bottom: 20px;
}

.kawaii-setting-section {
  animation: contentFadeIn 0.5s ease-out;
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.kawaii-setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 182, 193, 0.3);
  transition: all 0.3s;

  &:hover {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2);
    transform: translateY(-2px);
  }
}

.kawaii-setting-info {
  flex: 1;
}

.kawaii-setting-title {
  font-size: 16px;
  font-weight: bold;
  color: #7c5479;
  margin-bottom: 5px;
}

.kawaii-setting-desc {
  font-size: 12px;
  color: #99809d;
}

.kawaii-setting-control {
  :deep(.el-switch__core) {
    background-color: #ffd6ff;
    border-color: #ffcbe3;
  }

  :deep(.el-switch__core .el-switch__action) {
    background-color: white;
  }

  :deep(.el-switch.is-checked .el-switch__core) {
    background-color: #fe4ea4;
    border-color: #fe4ea4;
  }
}

.kawaii-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.kawaii-save-btn {
  background: linear-gradient(to right, #fe4ea4, #ff9fcf);
  border: none;
  border-radius: 20px;
  padding: 10px 25px;
  font-weight: bold;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(254, 78, 164, 0.3);
  }
}

/* 模块列表样式 */
.kawaii-module-list {
  .kawaii-module-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 182, 193, 0.3);
    transition: all 0.3s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.8);
    }

    .kawaii-drag-handle {
      cursor: move;
      padding: 0 10px;
      color: #b5a9d4;

      &:hover {
        color: #7c5479;
      }
    }

    .kawaii-module-info {
      flex: 1;

      .kawaii-module-desc {
        font-size: 12px;
        color: #99809d;
        margin-top: 5px;
      }
    }
  }
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #fe4ea4;
  border-color: #fe4ea4;
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #7c5479;
}

.kawaii-module-actions {
  display: flex;
  gap: 10px;

  i {
    cursor: pointer;
    padding: 5px;
    color: #b5a9d4;
    border-radius: 50%;
    transition: all 0.3s;

    &:hover {
      color: #7c5479;
      background-color: rgba(255, 182, 193, 0.2);
    }
  }
}

/* 下拉框和其他表单控件样式 */
:deep(.el-select .el-input__inner) {
  border-color: #ffcbe3;
}

:deep(.el-select .el-input__inner:focus),
:deep(.el-select .el-input__inner:hover) {
  border-color: #fe4ea4;
}

:deep(.el-select-dropdown__item.selected) {
  color: #fe4ea4;
}

.kawaii-search-bar {
  margin-bottom: 20px;
}

.kawaii-empty-blacklist {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  color: #999;

  .kawaii-empty-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    opacity: 0.6;
  }
}

.kawaii-blacklist {
  .kawaii-blacklist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .kawaii-user-info {
      display: flex;
      align-items: center;

      .kawaii-user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 15px;
      }

      .kawaii-user-details {
        .kawaii-user-name {
          font-size: 15px;
          color: #333;
          margin-bottom: 5px;
        }

        .kawaii-block-time {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
}
</style>
